<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>props</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root1"></div>
<div id="root2"></div>
<div id="root3"></div>

<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作dom -->
<script
        type="text/javascript"
        src="../js/react-dom.development.js"
></script>
<!-- 引入babel 将js转换成jsx -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<!-- type="text/babel" 表示写的是 jsx 使用babel 翻译 -->
<script type="text/babel">
    // 1. 创建类式组件
    class Person extends React.Component{
        // 初始化状态
        render(){
            console.log(this)
            return (
                <ul>
                    <li>姓名：{this.props.name}</li>
                    <li>性别：{this.props.sex}</li>
                    <li>年龄：{this.props.age}</li>
                </ul>
            );
        }
    }

    const person = {name:"阿张",sex:"男",age:"18"}
    // 2. 渲染元素到页面
    ReactDOM.render(<Person name='渣男' sex='男' age={18}/>,document.getElementById("root1"));
    ReactDOM.render(<Person {...person} />,document.getElementById("root2"));
    ReactDOM.render(<Person {...person} />,document.getElementById("root3"));

</script>
</body>
</html>
